<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Websocket client</title>
</head>

<body>

<header>
    <h1>Websocket client</h1>
    <div id="status"></div>
</header>

<nav>
    <div id="connecting">
        <label for="server"></label><input type='text' id="server" value="">
        <button type="button" onclick="toggle_connection()">connection</button>
    </div>

    <div id="connected">
        <label for="message"></label><input type='text' id="message" value="">
        <button type="button" onclick="sendTxt()">send</button>
        <button type="button" onclick="sendNodeTxt()">node</button>
        <br>
        <label for="mfa"></label><input type='text' id="mfa" placeholder="mod:fun(arg1,arg2,...)" value="">
        <button type="button" onclick="sendMFATxt()">mfa</button>
        <button type="button" onclick="sendRpcMFATxt()">rpc mfa</button>
    </div>
</nav>

<main id="content">
    <button id="clear" onclick="clearScreen()">Clear text</button>
    <div id="output"></div>
</main>

<script type="text/javascript">

    let websocket;
    const server = document.getElementById("server");
    const message = document.getElementById("message");
    const connecting = document.getElementById("connecting");
    const connected = document.getElementById("connected");
    const content = document.getElementById("content");
    const output = document.getElementById("output");
    const mfa = document.getElementById("mfa");

    server.value = "ws://" + window.location.host + "/websocket"
    connected.style.display = "none"
    content.style.display = "none"

    function connect() {
        const wsHost = server.value;
        websocket = new WebSocket(wsHost)
        showScreen('<b>Connecting to: ' + wsHost + '</b>')
        websocket.onopen = function (evt) {
            onOpen(evt)
        }
        websocket.onclose = function (evt) {
            onClose(evt)
        }
        websocket.onmessage = function (evt) {
            onMessage(evt)
        }
        websocket.onerror = function (evt) {
            onError(evt)
        }
    }

    function disconnect() {
        websocket.close()
    }

    function toggle_connection() {
        if (websocket && websocket.readyState === websocket.OPEN) {
            disconnect()
        } else {
            connect()
        }
    }

    function sendTxt() {
        if (websocket.readyState === websocket.OPEN) {
            const msg = message.value;
            websocket.send(msg)
            showScreen('sending: ' + msg)
        } else {
            showScreen('websocket is not connected')
        }
    }

    function sendNodeTxt() {
        message.value = "node"
        sendTxt()
    }

    function sendMFATxt() {
        message.value = "mfa " + mfa.value
        sendTxt()
    }

    function sendRpcMFATxt() {
        message.value = "rpc " + mfa.value
        sendTxt()
    }

    function onOpen(_evt) {
        showScreen('<span style="color: green">CONNECTED </span>')
        connecting.style.display = ""
        connected.style.display = ""
        content.style.display = ""
    }

    function onClose(_evt) {
        showScreen('<span style="color: red">DISCONNECTED</span>')
    }

    function onMessage(evt) {
        showScreen('<span style="color: blue">RESPONSE: ' + evt.data + '</span>')
    }

    function onError(evt) {
        showScreen('<span style="color: red">ERROR: ' + evt.data + '</span>')
    }

    function showScreen(html) {
        const el = document.createElement("p");
        el.innerHTML = html
        output.insertBefore(el, output.firstChild)
    }

    function clearScreen() {
        output.innerHTML = ""
    }

</script>
</body>
</html>